<template>
  <el-card class="chart-card">
    <template #header>
      <div class="card-header">
        <h3>健康趋势</h3>
        <el-select v-model="selectedDataType" placeholder="选择数据类型" @change="updateChart">
          <el-option
            v-for="type in dataTypes"
            :key="type"
            :label="type"
            :value="type"
          />
        </el-select>
      </div>
    </template>
    
    <div v-if="chartData.datasets[0].data.length === 0" class="no-data">
      <p>没有{{ selectedDataType || '选定类型' }}的数据</p>
    </div>
    
    <div v-else class="chart-container">
      <LineChart :chart-data="chartData" :options="chartOptions" />
    </div>
  </el-card>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue'
import { Line as LineChart } from 'vue-chartjs'
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js'

// 注册Chart.js组件
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)

export default {
  name: 'HealthChartSummary',
  components: {
    LineChart
  },
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const selectedDataType = ref('')
    
    // 提取数据类型
    const dataTypes = computed(() => {
      const types = new Set(props.data.map(item => item.data_type))
      return Array.from(types)
    })
    
    // 初始化图表数据
    const chartData = ref({
      labels: [],
      datasets: [
        {
          label: '数值',
          backgroundColor: 'rgba(64, 158, 255, 0.2)',
          borderColor: '#409EFF',
          borderWidth: 2,
          data: []
        }
      ]
    })
    
    // 图表选项
    const chartOptions = {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: false
        }
      }
    }
    
    // 更新图表数据
    const updateChart = () => {
      if (!selectedDataType.value) return
      
      const filteredData = props.data
        .filter(item => item.data_type === selectedDataType.value)
        .sort((a, b) => new Date(a.created_at) - new Date(b.created_at))
      
      chartData.value.labels = filteredData.map(item => {
        const date = new Date(item.created_at)
        return date.toLocaleDateString('zh-CN')
      })
      
      chartData.value.datasets[0].data = filteredData.map(item => item.value)
      chartData.value.datasets[0].label = `${selectedDataType.value} (${filteredData[0]?.unit || ''})`
    }
    
    // 当数据更新时重新计算
    watch(() => props.data, () => {
      if (selectedDataType.value) {
        updateChart()
      } else if (dataTypes.value.length > 0) {
        selectedDataType.value = dataTypes.value[0]
      }
    }, { deep: true })
    
    // 初始化
    onMounted(() => {
      if (dataTypes.value.length > 0) {
        selectedDataType.value = dataTypes.value[0]
      }
    })
    
    return {
      selectedDataType,
      dataTypes,
      chartData,
      chartOptions,
      updateChart
    }
  }
}
</script>

<style scoped>
.chart-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  color: #409EFF;
}

.no-data {
  text-align: center;
  padding: 60px 0;
  color: #909399;
}

.chart-container {
  position: relative;
  height: 300px;
}
</style> 